.content-price-splice-tour {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}
.content-image-splice-tour {
    width: 100%;
    height: inherit;
    object-fit: cover;
}
.content-price-splice-tour {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.content-price-splice-tour span {
    color: #fff;
}
.content-information-splice-tour {
    position: absolute;
    bottom: 0;
    padding: 10px;
    /* background: #0000007d; */
    background: rgba(45, 62, 82, 0.7);
}
.content-main-relayvine {
    height: 260px;
    width: inherit;
    position: relative;
    border-radius: var(--border-width);
    overflow: hidden;
}
.content-information-splice-tour h3 {
    margin: 0;
    font-size: 14px;
    color: #fff;
    margin-bottom: 5px;
}
.content-information-splice-tour p {
    margin: 8px 0;
    color: #fff;
    height: 44px;
    overflow: hidden;
}
.content-date-splice-tour {
    position: absolute;
    top: 3%;
    background: #434040ad;
    color: #fff;
    padding: 4px 5px;
    border-radius: var(--border-width);
    left: 2%;
}
.content-price-splice-tour a {
    color: #fff;
    background: #ff0000;
    padding: 4px;
    border-radius: var(--border-width);
    font-size: 14px;
}
.container-relayvine-list {
    display: grid;
    grid-template-columns: repeat(3, 350px);
    gap: 20px;
    place-content: center;
}
.content-main-relayvine::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 1;
    transition: opacity 0.3s ease;
}
.content-main-relayvine.color-1::before {
    background: #e300044d;
}
.content-main-relayvine.color-2::before {
    background: #f78a0163;
}
.content-main-relayvine.color-3::before {
    background: #f7e70063;
}
.content-main-relayvine.color-4::before {
    background: #017d1f59;
}
.content-main-relayvine.color-5::before {
    background: #0000ff52;
}
.content-main-relayvine.color-6::before {
    background: #ff00a652;
}
.content-main-relayvine:hover::before {
    opacity: 0;
}
.content-main-relayvine.color-1 a, .content-main-relayvine.color-1 .content-date-splice-tour {
    background: #f92d31;
}
.content-main-relayvine.color-2 a, .content-main-relayvine.color-2 .content-date-splice-tour {
    background: #f78a01;
}
.content-main-relayvine.color-3 a, .content-main-relayvine.color-3 .content-date-splice-tour {
    background: #dfd100f2;
}
.content-main-relayvine.color-4 a, .content-main-relayvine.color-4 .content-date-splice-tour {
    background: #017d1f;
}
.content-main-relayvine.color-5 a, .content-main-relayvine.color-5 .content-date-splice-tour {
    background: #1567e5;
}
.content-main-relayvine.color-6 a, .content-main-relayvine.color-6 .content-date-splice-tour {
    background: #ff3cbb;
}
@media screen and (max-width: 1400px) {
    .container-relayvine-list {
        grid-template-columns: repeat(3, 350px);
    }
}
@media screen and (max-width: 1280px) {
    .container-relayvine-list {
        grid-template-columns: repeat(2, 350px);
    }
}

@media (max-width: 1024px) {
    .container-relayvine-list {
        grid-template-columns: repeat(2, 350px);
    }
}

@media (max-width: 780px) {
    .container-relayvine-list {
        grid-template-columns: repeat(1, 380px);
    }
}